<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>邀请好友扫码注册</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
</head>            
<body>
	<div class="page-group ms-controller" :controller="qrcode" :on-click="@close($event)" style="cursor :pointer">
        <div class="page page-current">
        	<header class="bar bar-nav" style="overflow: visible;">
        	  	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
        	  	<a class="icon icon-settings pull-right" href="javascript:;" :on-click="@show"></a>
                <ul class="cover" style="position: absolute; top: 40px; font-size: .7rem; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; right: 0; background-color: #fff; width: 40%; z-index: 99999999; display: none">
                    <li style="border-bottom: 1px solid #eee; text-align: center; padding: 8px; cursor :pointer" :for="el in @list" :on-click="@choose(el.id,$event)">{{el.title}}</li>
                    <li :if="@list.length == 0" style="border-bottom: 1px solid #eee;" >暂无背景图片选择</li>
                </ul>
        	  	<h1 class="title">购享惠</h1>
        	</header>
            <div class="content"style="background: url('./images/dd.png') top center no-repeat; background-size: contain; height: 100%">
                <div style="margin: 0.5rem auto 0 auto; text-align: center">
                    <img class="avatar_url" style="border-radius: 40px" width='80' height='80' src="" alt="">
                </div>
                <div style="margin: 0 auto; text-align: center">
                    <span class="nickname"></span>                
                </div>
                <div>
                    <img style="width: 68%;display: block;padding-top: .3rem;margin: auto" src="/logo" alt="">
                </div>
                <!--<div class="card demo-card-header-pic"  style="margin: .5rem auto .5rem auto; position: absolute; bottom: 4rem;">-->
                    <div  style="text-align: center;padding-top: 0.3rem;"  class=" color-white no-border no-padding">
                      <img style="width: 30%" class='card-cover' alt="">

                    </div>

                <div style="padding-bottom: 6rem;display: block">
                    <p style="text-align: center;color: #f3da6d; font-size: 20px;margin-top: .3rem;">扫码开启购物之旅</p>
                </div>

                <!--</div>-->

            </div>
        </div>
    </div>
    <script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
        var qrcode = avalon.define({
            $id: "qrcode",
            list: [],
            getInfo: function(){
                Mall.request( "/api/UserInfo" )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            data.data.qrcode && ( qrcode.list = data.data.qrcode )
                            if( data.data.nickname ){
                                $(".nickname").text( data.data.nickname );
                            }
                            else{
                                $(".nickname").text( data.data.real_name );
                            }
                            $(".avatar_url").attr( "src", data.data.avatar_url );
                            $(".card-cover").attr( "src", data.data.invite_qrcode );
                            $(".content").css( "backgroundImage", 'url('+data.data.qrcode_url+')' );
                        }
                        else{
                            $.alert(data.error_msg)
                        }
                        avalon.scan( document.body )
                    } )
            },
            show: function(){
                if( $( ".cover" ).css( "display" ) == "none" ){
                    $( ".cover" ).css( "display", "block" )
                }
                else{
                    $( ".cover" ).css( "display", "none" )
                }
            },
            close: function( e ){
                if( !$( e.target ).closest( ".cover" ).length && !$( e.target ).closest( ".icon-settings" ).length ){
                    $( ".cover" ).css( "display", "none" )
                }
            },
            choose: function( id, e ){
                e.stopPropagation();
                Mall.request( "/api/Pic", { id: id } )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            $( ".cover" ).css( "display", "none" );
                            qrcode.getInfo();
                        }
                        else{
                            $.alert(data.error_msg)
                        }
                    } )
            }
        })
        qrcode.getInfo()
    </script>
</body>
</html>